<script setup lang='ts' name="house-district-add">
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import markPng from '@/assets/images/red-marker.png'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AddDistrict from './AddDistrict.vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import {
    createLandTransaction,
    getLandTransaction,
    getLandUseType,
    getRegionList,
    queryBrandCompany,
    updateLandTransaction,
} from '@fl/api/joint-api'
import AMapLoader from '@amap/amap-jsapi-loader'
import { useAreaData } from '@/hooks/useAreaList'

const router = useRouter()
function goBack() {
    router.push('/joint/land-policy/city-plan')
}

type formType = {
    id?: string | number | undefined
    name?: string
    company?: string
    addressName?: string
    categoryId?: number | string
    batchYear?: number | string
    batchNum?: number | string
    transferTerm?: number | string
    landArea?: number | string
    plannedBuildingArea?: number | string
    highlightAreaCoordinates?: string
    startingPrice?: number | string
    plotRatio?: number | string
    startingFloorPrice?: number | string
    finalPrice?: number | string
    finalFloorPrice?: number | string
    startingLandUnitPrice?: number | string
    longitude?: number | string
    latitude?: number | string
    projectAddress?: string
    status?: number | string
    plate?: number | string
    brandCompany?: string
    brandCompanyId: string
    scale?: number | string
    areaCode?: string
    cityCode?: string
    areaName?: string
    cityName?: string
}

const formData = ref<formType>({
    name: '',
    company: '',
    batchNum: '',
    batchYear: '',
    transferTerm: '',
    addressName: '',
    categoryId: '', // rootCategoryId
    landArea: '',
    plannedBuildingArea: '',
    highlightAreaCoordinates: '',
    longitude: '',
    latitude: '',
    status: '',
    plate: '', // 板块
    brandCompany: '', // 土地竞得公司
    brandCompanyId: '',
    scale: '17',
    areaCode: '',
    areaName: '',
    cityCode: '',
    cityName: '',
})

// 获取路由参数
const route = useRoute()
const brandCompanyList = ref([])
const districtTypes = ref([])
// `status` int NOT NULL DEFAULT '0' COMMENT '是否成交 0:未成交 1:已成交 2:拟出让 3:待出让 4:已流拍 5:已终止',
const statusTypes = ref([
    /**
     {
    label:'未成交',
    value:0
  },*
  */
    {
        label: '已成交',
        value: 1,
    },
    {
        label: '拟出让',
        value: 2,
    },
    {
        label: '待出让',
        value: 3,
    },
    {
        label: '已流拍',
        value: 4,
    },
    {
        label: '已终止',
        value: 5,
    },
])

const transferTermList = ref([
    {
        label: '40年',
        value: 40,
    },
    {
        label: '50年',
        value: 50,
    },
    {
        label: '70年',
        value: 70,
    },
])

function validateBuildingArea(rule: any, value: any, callback: any) {
    if (value === '') {
        callback(new Error('请输入规划建筑面积'))
    }
    else {
        if (formData.value.plannedBuildingArea !== '') {
            if (Number(formData.value.plannedBuildingArea) > Number(formData.value.landArea)) {
                formData.value.plotRatio = ''
                callback(new Error('规划建筑面积不能大于土地出让面积'))
            }
            else {
                callback()
            }
        }
        callback()
    }
}


/**
 * 容积率=规划建筑面积/土地出让面积 (保留2位小数)
 * 起拍土地单价=起拍总价/土地出让面积
 * 成交楼面价=成交总价/规划建筑面积
 * 起拍楼面价=起拍总价/规划建筑面积
 */
const rules = reactive<any>({
    blockNumber: [{ message: '请输入板块编号', required: true, trigger: 'blur' }],
    cityCode: [
        { message: '请选择所属区域', required: true, trigger: 'change' },
    ],
    areaCode: [
        { message: '请选择所属区域', required: false, trigger: 'change' },
    ],
    status: [{ message: '请选择状态', required: true, trigger: 'change' }],
    batchYear: [{ message: '请选择批次', required: true, trigger: 'change' }],
    batchNum: [{ message: '请输入号次', required: true, trigger: 'blur' }],
    transferTerm: [{ message: '请选择出让年限', required: true, trigger: 'change' }],
    landLocation: [{ message: '请输入土地位置', required: true, trigger: 'blur' }],
    company: [{ message: '请输入竞得公司', required: false, trigger: 'blur' }],
    categoryId: [{ message: '请选择土地用途', required: true, trigger: 'change' }],
    landArea: [{ message: '请输入土地出让面积', required: true, trigger: 'blur' }],
    plannedBuildingArea: [{ message: '请输入规划建筑面积', required: true, trigger: 'blur' }],
    plotRatio: [{ message: '请输入容积率', required: true, trigger: 'blur' }],
    transferType: [{ message: '请选择出让方式', required: true, trigger: 'change' }],
    startingPrice: [{ message: '请输入起拍价格', required: true, trigger: 'blur' }],
    finalPrice: [{ message: '请输入成交总价(万元）', required: false, trigger: 'blur' }],
    startingFloorPrice: [{ message: '请输入起拍楼面价(元/㎡）', required: false, trigger: 'blur' }],
    finalFloorPrice: [{ message: '请输入成交楼面价(元/㎡）', required: false, trigger: 'blur' }],
    startingLandUnitPrice: [{ message: '请输入起拍土地单价', required: true, trigger: 'blur' }],
    transactionDate: [{ message: '请选择出让时间', required: true, trigger: 'blur' }],
    longitude: [{ message: '请输入经度', required: true, trigger: 'blur,change' }],
    latitude: [{ message: '请输入纬度', required: true, trigger: 'blur,change' }],
    projectAddress: [{ message: '请输入项目地址', required: false, trigger: 'blur' }, { min: 3, max: 30, message: '项目地址最少3个字符最多30个字符', trigger: 'blur' }],
    imgFilePath: [{ message: '请上传', required: false, trigger: 'blur' }],
})

watch(formData, (newValue) => {
    if (newValue.plannedBuildingArea && newValue.landArea) {
        formData.value.plotRatio = (newValue.plannedBuildingArea / newValue.landArea).toFixed(2)
    }
    else {
        formData.value.plotRatio = ''
    }

    if (newValue.startingPrice && newValue.plannedBuildingArea) {
        formData.value.startingFloorPrice = (newValue.startingPrice * 10000 / newValue.plannedBuildingArea).toFixed(2)
    }
    else {
        formData.value.startingFloorPrice = ''
    }
    //cityCode和name
    if(newValue.cityCode){
        formData.value.cityName = getAreaName(newValue.cityCode)
    }
    if(newValue.areaCode){
        formData.value.areaName = getAreaName(newValue.areaCode)
    }

    if (newValue.finalPrice && newValue.plannedBuildingArea) {
        formData.value.finalFloorPrice = (newValue.finalPrice * 10000 / newValue.plannedBuildingArea).toFixed(2)
    }
    else {
        formData.value.finalFloorPrice = ''
    }

    if (newValue.startingPrice && newValue.landArea) {
        formData.value.startingLandUnitPrice = (newValue.startingPrice * 10000 / newValue.landArea).toFixed(2)
    }
    else {
        formData.value.startingLandUnitPrice = ''
    }
}, {
    deep: true,
})

const usedTypeProps = reactive({
    multiple: true,
    checkStrictly: false,
})

const highlightAreaData = ref<string | null>('')
function getAreaData(data) {
    highlightAreaData.value = data.polygonData
    formData.value.highlightAreaCoordinates = data.polygonData
    formData.value.scale = data.zoom
    formData.value.projectAddress = data.address
    formData.value.longitude = data.centerPosition.longitude
    formData.value.latitude = data.centerPosition.latitude
    initMap()
}

function getLandDetail(id) {
    getLandTransaction(id).then((res) => {
        if (res.code === 200) {
            isAdd.value = false
            formData.value = res.data
            if (res.data.finalPrice === 0 || !res.data.finalPrice) {
                formData.value.finalPrice = undefined
            }
            if (res.data.startingPrice === 0 || !res.data.startingPrice) {
                formData.value.startingPrice = undefined
            }
            formData.value.regionId = Number(res.data.regionId)
            highlightAreaData.value = formData.value.highlightAreaCoordinates || sessionStorage.getItem('savedPolygon')
            initMap()
        }
    })
}

const tableData = ref([])
const isAdd = ref(true)
const formRef = ref()
const showDistrict = ref(false)

async function doSave(formEl: FormInstance | undefined) {
    console.log('check输入')
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (formData.value.status === 1) {
                if (!formData.value.finalPrice) {
                    ElMessage.warning('已成交状态下,需填写成交总价')
                    return false
                }
            }
            saveRow()
            sessionStorage.removeItem('savedPolygon')
        }
    })
}

type yearType = {
    label: string | number
    value: string | number
}
const batchYearList = ref<yearType[]>([])
function createBatchYearList() {
    // 获取当前年份
    const currentYear = new Date().getFullYear()
    // 计算5年后的年份
    const yearsBefore10 = Array.from({ length: 15 }).fill(0).map((_, index) => currentYear - index)
    // 计算10年后的年份
    const yearsAfter10 = Array.from({ length: 5 }).fill(0).map((_, index) => currentYear + index + 1)
    console.log(currentYear, yearsBefore10, yearsAfter10)
    const allYear = [...yearsBefore10, ...yearsAfter10]
    const yearList = allYear.sort()
    yearList.forEach((item) => {
        batchYearList.value.push({ label: item, value: item })
    })
}

const usedTypeOptions = ref([])
async function queryUsedTypes() {
    const result = await getLandUseType({})
    const useTypeList = result.data || []
 
    usedTypeOptions.value = useTypeList.map((item) => ({
        label: item.categoryName,
        value: item.id,
    }))
}

const transformTypes = ref([
    {
        label: '现场拍卖',
        value: '1',
    },
    {
        label: '网上挂牌',
        value: '2',
    },
])

const { areaList, getAreaName } = useAreaData()
const currentAreaList = computed(() => {
    return areaList?.value.find((item: any) => item.code === formData.value.cityCode)?.areaList || []
})

watch(()=>formData.value.cityCode,()=>{
    formData.value.areaCode = ''
})

function saveRow() {
    /**
     if(!formData.value['brandCompanyId']){
    formData.value['brandCompanyId']= '0'
  }
  */
    if (!formData.value.id && isAdd.value) {
        createLandTransaction(formData.value).then((res) => {
            if (res.code == 200) {
                ElMessage.success('操作成功')
                goBack()
            }
            else {
                ElMessage.error(res.msg)
            }
        })
    }
    else {
        updateLandTransaction(formData.value).then((res) => {
            if (res.code == 200) {
                ElMessage.success('操作成功')
                goBack()
            }
            else {
                ElMessage.error(res.msg)
            }
        })
    }
}

// 图片上传回调
function uploadSuccess({ name, url }) {

}

/**
 * 地图处理
 */
const showSearchList = ref(false)
window._AMapSecurityConfig = {
    securityJsCode: '3d2b0d182274c8f36d175015792a5525',
}

function openInfoWindow() {
    const infoWindow = new AMap.InfoWindow({
    // anchor: 'top-right', //信息窗体的三角所在位置
        content: `<h3 style="font-weight: bold;line-height: 32px">${formData.value.addressName || ''}</h3><h4>经度${formData.value && formData.value.longitude ? formData.value.longitude : ''}，纬度${formData.value && formData.value.latitude ? formData.value.latitude : ''}</h4>`, // 信息窗体的内容可以是任意html片段
        // 创建信息窗体
        isCustom: false, // 使用自定义窗体
        offset: new AMap.Pixel(0, 0),
    })
    infoWindow.open(map, [formData.value && formData.value.longitude ? formData.value.longitude : '', formData.value && formData.value.latitude ? formData.value.latitude : '']) // 填写想要窗体信息指示的坐标
}

var map: any = null // 初始化地图
function initMap() {
    map = null
    AMapLoader.load({
        key: '8e125d7a61c3c334ca9538a5c6798582', // 申请好的Web端开发者Key，首次调用 load 时必填
        plugins: [
            'AMap.MouseTool',
            'AMap.PolyEditor',
            'AMap.ControlBar',
            'AMap.Geocoder',
            'AMap.PlaceSearch',
            'AMap.Scale', // 工具条，控制地图的缩放、平移等
            'AMap.ToolBar', // 比例尺，显示当前地图中心的比例尺
            'AMap.Geolocation', // 定位，提供了获取用户当前准确位置、所在城市的方法
            'AMap.HawkEye', // 鹰眼，显示缩略图
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    }).then((AMap) => {
        map = new AMap.Map('mapBox', {
            center: [formData.value && formData.value.longitude ? formData.value.longitude : '114.305215', formData.value && formData.value.latitude ? formData.value.latitude : '30.592935'], // 初始化地图中心点位置
            doubleClickZoom: true, // 双击放大缩小
            dragEnable: true, // 禁止鼠标拖拽
            keyboardEnable: true, // 键盘控制放大缩小移动旋转
            scrollWheel: true, // 鼠标滚轮放大缩小
            viewMode: '2D', // 是否为3D地图模式
            // 设置地图容器id
            zoom: Number(formData.value.scale) || 16, // 初始化地图层级
        })
        map.setDefaultCursor('pointer') // 使用CSS默认样式定义地图上的鼠标样式（default/pointer/move/crosshair）
        map.addControl(new AMap.Scale()) // 异步同时加载多个插件
        map.addControl(new AMap.ToolBar())
        // 显示地图层级与中心点信息
        function logMapinfo() {
            const zoom = map.getZoom() // 获取当前地图级别
            const center = map.getCenter() // 获取当前地图中心位置
            console.log(zoom, center)
            formData.value.scale = zoom
            formData.value.longitude = center.lng
            formData.value.latitude = center.lat
        }
        if (formData.value.longitude) {
            const marker = new AMap.Marker({
                position: [formData.value.longitude, formData.value.latitude], // 标注点位置
                icon: markPng, // 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
                size: [48, 48],
                title: '', // 标注点标题,
            })
            marker.setMap(map)
        }
        // 绑定地图移动与缩放事件
        map.on('moveend', logMapinfo)
        map.on('zoomend', logMapinfo)

        // 为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', (e: any) => {
            map.clearMap()
            formData.value.longitude = e.lnglat.getLng()
            formData.value.latitude = e.lnglat.getLat()
            formData.value.addressName = ''
            if (formRef.value) {
                formRef.value.clearValidate('longitude')
                formRef.value.clearValidate('latitude')
            }
            const marker = new AMap.Marker({
                position: [formData.value.longitude, formData.value.latitude], // 标注点位置
                icon: markPng,
                size: [48, 48],
                title: '', // 标注点标题,
            })
            marker.setMap(map)
            openInfoWindow()
        })
        if (formData.value.id) {
            // openInfoWindow()
        }
        if (highlightAreaData.value) {
            redrawPolygon()
        }
    })
        .catch((e) => {
            console.log(e)
        })
}

function clearPolygon() {
    // this.map.remove(this.polygonList);
    map.clearMap() // 清除地图上的所有覆盖物
}

function redrawPolygon() {
    map.clearMap()
    // 用浏览器模拟数据库存取
    const savedPolygon = JSON.parse(highlightAreaData.value as string)
    console.log('重绘多边形数据', savedPolygon)
    if (savedPolygon == null)
        return
    for (let i = 0; i < savedPolygon.length; i++) {
        const polygon = new AMap.Polygon(savedPolygon[i])
        // 添加点击事件
        polygon.on('click', (i) => {
            // 显示窗口
            console.log(`您点击了电子围栏！${i}`)
        })
        map.add(polygon)
    }
}

// 搜索
function onPlaceSearch() {
    showSearchList.value = true
    console.log(map)
    const placeSearch = new AMap.PlaceSearch({
        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
        // citylimit: true, //是否强制限制在设置的城市内搜索
        map, // 展现结果的地图实例
        // city: "010", //兴趣点城市
        pageIndex: 1, // 页码
        pageSize: 6, // 单页显示结果条数
        panel: 'search-list-box', // 结果列表将在此容器中进行展示。
    })
    placeSearch.search(formData.value.projectAddress, (status: any, result: any) => {
        console.log('status', status)
        console.log('placeSearch', result)
        if (formData.value.id) {
            // showSearchList.value = false
            // openInfoWindow()
        }
    })

    placeSearch.on('listElementClick', (e: any) => {
        console.log('onListElementClick', e)
        formData.value.projectAddress = e.data.address
        formData.value.addressName = e.data.name
        formData.value.longitude = e.data.location.lng
        formData.value.latitude = e.data.location.lat
        showSearchList.value = false
        showDistrict.value = true
    // this.poi = e.data
    })
    placeSearch.on('markerClick', (e: any) => {
        console.log('onMarkerClick', e)
        // this.poi = e.data
        formData.value.longitude = e.data.location.lng
        formData.value.latitude = e.data.location.lat
        showSearchList.value = false
    })
}

function brandCompanyChange(val) {
    if (val) {
        const brandCompany = brandCompanyList.value.find((item) => {
            return item.value === val
        })
        if (brandCompany) {
            formData.value.brandCompany = brandCompany.label
        }
    }
    else {
        formData.value.brandCompany = ''
        formData.value.brandCompanyId = ''
    }
}

onMounted(() => {
    const routeParams = route.query ? route.query : ''
    console.log(`route.query`, routeParams)

    if (routeParams.id) {
        getLandDetail(routeParams.id)
    }
    else {
        initMap()
    }
    createBatchYearList()
  
    queryUsedTypes()

    queryBrandCompany().then((res) => {
        const result = res.data
        const temArray = []
        result.forEach((item) => {
            temArray.push({ label: item.dpmc, value: item.companyId })
        })
        brandCompanyList.value = temArray
    })
})
</script>

<template>
    <el-card>
        <el-form ref="formRef"
                 :model="formData"
                 :rules="rules"
                 label-width="auto"
        >
            <el-row :gutter="40">
                <el-col :span="24">
                    <el-button class="mb-20"
                               @click="goBack"
                    >
                        <el-icon mr8
                                 style="font-size: 19px"
                        >
                            <Back />
                        </el-icon> 返回列表
                    </el-button>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="板块编号"
                                  prop="blockNumber"
                    >
                        <el-input v-model="formData.blockNumber"
                                  placeholder="请输入板板块编号"
                                  clearable
                        />
                    </el-form-item>
                </el-col>

                 <el-col :span="8">
                    <el-form-item label="所属城市"
                                  prop="cityCode"
                    >
                        <el-select v-model="formData.cityCode"
                                   class="m-2"
                                   placeholder="请选择区域"
                                   clearable
                        >
                            <el-option v-for="item in areaList"
                                       :key="item.code"
                                       :value="item.code"
                                       :label="item.name"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="所属区域"
                                  prop="areaCode"
                    >
                        <el-select v-model="formData.areaCode"
                                   class="m-2"
                                   placeholder="请选择区域"
                                   clearable
                        >
                            <el-option v-for="item in currentAreaList"
                                       :key="item.code"
                                       :value="item.code"
                                       :label="item.name"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="批次"
                                  prop="batchYear"
                    >
                        <el-select v-model="formData.batchYear"
                                   class="m-2"
                                   placeholder="请选择批次"
                                   clearable
                        >
                            <el-option v-for="item in batchYearList"
                                       :key="item.value"
                                       :value="item.value"
                                       :label="item.label"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>

                <!-- <el-col :span="8">
              <el-form-item label="所属板块" prop="landLocation">
                  <el-input v-model="formData.landLocation"  placeholder="请输入所属板块" clearable/>
              </el-form-item>
            </el-col> -->
                <el-col :span="8">
                    <el-form-item label="号次"
                                  prop="batchNum"
                    >
                        <el-input v-model="formData.batchNum"
                                  placeholder="请输入号次"
                                  clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="出让年限"
                                  prop="transferTerm"
                    >
                        <el-select v-model="formData.transferTerm"
                                   class="m-2"
                                   placeholder="请选择出让年限"
                                   clearable
                        >
                            <el-option v-for="item in transferTermList"
                                       :key="item.value"
                                       :value="item.value"
                                       :label="item.label"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="土地位置"
                                  prop="landLocation"
                    >
                        <el-input v-model="formData.landLocation"
                                  placeholder="请输入土地位置"
                                  clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="用途"
                                  prop="categoryId"
                    >
                        <el-select v-model="formData.categoryId"
                                   class="m-2"
                                   placeholder="请选择用途"
                                   clearable
                        >
                            <el-option v-for="item in usedTypeOptions"
                                       :key="item.value"
                                       :value="item.value"
                                       :label="item.label"
                            />
                        </el-select>
                        <!-- 保留二层级联 -->
                        <!-- <el-cascader :props="usedTypeProps"
                             :show-all-levels="false"
                             :options="usedTypeOptions" clearable v-model="formData.caseCategoryId"
                             @change="handleUseTypeChange"/> -->
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="土地出让面积(㎡)"
                                  prop="landArea"
                    >
                        <el-input-number v-model="formData.landArea"
                                         placeholder="请输入土地出让面积"
                                         :controls="false"
                                         :precision="2"
                                         clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="规划建筑面积(㎡)"
                                  prop="plannedBuildingArea"
                    >
                        <el-input-number v-model="formData.plannedBuildingArea"
                                         type="number"
                                         :precision="2"
                                         placeholder="请输入规划建筑面积"
                                         :controls="false"
                                         clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="容积率"
                                  prop="plotRatio"
                    >
                        <el-input v-model="formData.plotRatio"
                                  placeholder="请输入容积率"
                                  :disabled="true"
                                  clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="出让方式"
                                  prop="transferType"
                    >
                        <el-select v-model="formData.transferType"
                                   class="m-2"
                                   placeholder="请选出让方式"
                                   clearable
                        >
                            <el-option v-for="item in transformTypes"
                                       :key="item.value"
                                       :value="item.value"
                                       :label="item.label"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="起拍价格(万元)"
                                  prop="startingPrice"
                    >
                        <el-input-number v-model="formData.startingPrice"
                                         placeholder="请输入起拍价格"
                                         :controls="false"
                                         :precision="2"
                                         clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="成交总价(万元)"
                                  prop="finalPrice"
                    >
                        <el-input-number v-model="formData.finalPrice"
                                         placeholder="请输入成交总价"
                                         :controls="false"
                                         :precision="2"
                                         clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="起拍楼面价(元/㎡)"
                                  prop="startingFloorPrice"
                    >
                        <el-input v-model="formData.startingFloorPrice"
                                  placeholder="请输入起拍楼面价"
                                  :disabled="true"
                                  clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="成交楼面价(元/㎡)"
                                  prop="finalFloorPrice"
                    >
                        <el-input v-model="formData.finalFloorPrice"
                                  placeholder="请输入成交楼面价"
                                  :disabled="true"
                                  clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="起拍土地单价(元/㎡)"
                                  prop="startingLandUnitPrice"
                    >
                        <el-input v-model="formData.startingLandUnitPrice"
                                  placeholder="请输入起拍土地单价"
                                  :disabled="true"
                                  clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="出让时间"
                                  prop="transactionDate"
                                  clearable
                    >
                        <el-date-picker v-model="formData.transactionDate"
                                        format="YYYY-MM-DD HH:mm:ss"
                                        value-format="YYYY-MM-DD HH:mm:ss"
                                        type="datetime"
                                        placeholder="请选择出让时间"
                                        size="small"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="状态"
                                  prop="status"
                    >
                        <el-select v-model="formData.status"
                                   placeholder="请选择状态"
                        >
                            <el-option v-for="item in statusTypes"
                                       :key="item.value"
                                       :value="item.value"
                                       :label="item.label"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="竞得公司"
                                  prop="company"
                    >
                        <el-input v-model="formData.company"
                                  placeholder="请输入竞得公司"
                                  clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="品牌公司"
                                  prop="brandCompanyId"
                    >
                        <el-select-v2 v-model="formData.brandCompanyId"
                                      filterable
                                      :options="brandCompanyList"
                                      placeholder="请选择品牌公司"
                                      clearable
                                      @change="brandCompanyChange"
                        >
                            <template #default="{ item }">
                                <span style="margin-right: 8px">{{ item.label }}</span>
                            </template>
                        </el-select-v2>
                    </el-form-item>
                </el-col>

                <!-- <el-col :span="8" /> -->

                <el-col :span="8">
                    <el-form-item label="经度"
                                  prop="longitude"
                    >
                        <el-input v-model="formData.longitude"
                                  disabled
                                  placeholder="请输入经度"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="纬度"
                                  prop="latitude"
                    >
                        <el-input v-model="formData.latitude"
                                  disabled
                                  placeholder="请输入纬度"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label=""
                                  label-width="150"
                                  style="color:cadetblue;font-size:15px;font-weight: bold;"
                    >
                        使用指引:&nbsp;点击“绘制区域”来描绘土拍地块区域
                    </el-form-item>

                    <el-form-item label="项目地址"
                                  prop="projectAddress"
                    >
                        <el-input v-model="formData.projectAddress"
                                  maxlength="30"
                                  placeholder="请输入项目地址"
                                  style="width:80%"
                                  clearable
                                  :disabled="true"
                                  @keyup.enter="onPlaceSearch"
                        />

                        <el-button type="primary"
                                   ml20
                                   @click="showDistrict = true"
                        >
                            绘制区域
                        </el-button>
                    </el-form-item>
                </el-col>

                <el-col v-if="showSearchList"
                        :span="24"
                >
                    <div id="search-list-box"
                         class="search-list-box"
                    />
                </el-col>

                <el-col :span="24">
                    <el-form-item label="地图">
                        <div id="mapBox"
                             style="border:1px solid #ddd;width:80%;height:360px;"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="位置示意图"
                                  prop="imgFilePath"
                    >
                        <UpdatedOss v-model="formData.imgFilePath"
                                    accept=".png,.jpg,.jpeg"
                                    @success="uploadSuccess"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="18"
                        style="padding-left:90px"
                >
                    <el-form-item>
                        <el-button @click="goBack">
                            取消
                        </el-button>

                        <el-button type="primary"
                                   @click="doSave(formRef)"
                        >
                            提交
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <AddDistrict v-if="showDistrict"
                 key="add"
                 ref="addUserRef"
                 v-model="showDistrict"
                 :zoom="formData.scale"
                 :address="formData.projectAddress"
                 :position="[formData.longitude, formData.latitude]"
                 :data="highlightAreaData"
                 @confirm="getAreaData"
    />
</template>

<style lang="scss" scoped>
:deep(.el-table td) {
    border-bottom: 1px solid #e5e6eb;
}

:deep(.el-table th) {
    border-bottom: 1px solid #e5e6eb;
}

:deep(.el-input-number) {
    width: 100% !important;
}
:deep(.el-input-number .el-input__inner) {
    text-align: left;
}
</style>
